<template>
    <div v-drag :class="{'fixed':isFixed}" @dblclick="dblclick" @mouseup="mouseup" v-bind:style="position">
        <slot/>
    </div>
</template>
<script>

    export default {
        props: {
            isFixed: {
                type: Boolean,
                default: true
            },
            data: {
                type: [String, Number, Object, Array, Function],
                default: {}
            }
        },
        data() {
            const me = this;
            let position = {
                left: '',
                top: '',
                zIndex: ''
            };

            if (me.data.position) {
                position = me.data.position;
            }

            return {
                position: position,
                el: null
            };
        },
        mounted(){
            const me = this;
        },
        directives: {
            drag(el, binding, vnode) {
                el.onmousedown = (e) => {
                    if (e.stopPropagation) e.stopPropagation();
                    if (e.preventDefault) e.preventDefault();
                    let
                        disx = e.pageX - el.offsetLeft,
                        disy = e.pageY - el.offsetTop
                    let parent = vnode.context.getParentTag(el,'dragContainer');
                    let maxWidth = 500;
                    let maxHeight = 500;
                    if(parent){
                        maxWidth = parent.clientWidth;
                        maxHeight = parent.clientHeight;
                    }
                    console.log(el)
                    document.onmousemove = (e) => {
                        let left = e.pageX - disx;
                        if(left < 0){
                            left = 0;
                        }
                        if(left > maxWidth - el.offsetWidth){
                            left = maxWidth - el.offsetWidth;
                        }
                        el.style.left = left + 'px'
                        let top = e.pageY - disy;
                        if(top < 0){
                            top = 0;
                        }
                        console.log(top)
                        console.log(maxHeight)
                        console.log(el.offsetHeight)
                        if(top > maxHeight - el.offsetHeight){
                            top = maxHeight - el.offsetHeight;
                        }
                        el.style.top = top + 'px'
                        el.style.zIndex = top;
                        let position = {
                            left: el.style.left,
                            top: el.style.top,
                            zIndex: el.style.zIndex
                        }
                        vnode.context.position = position;
                    }
                    document.onmouseup = (e) => {

                        document.onmousemove = false;
                    }
                }
            },

        },
        methods: {
            dblclick(el) {
                const me = this;
                if (me.el == null) {
                    me.el = el;
                }
                this.$emit('dblclick', el, me.data);
            },
            mouseup(el) {
                const me = this;
                me.$emit('position', me.data, me.position);
            },
            getParentTag(startTag,className) {
                var self = this;
                // 传入标签是否是DOM对象
                if (!(startTag instanceof HTMLElement)) return;
                if(startTag.className && startTag.className.indexOf(className) > -1){
                    return startTag;
                }
                if (startTag.parentElement) {
                    return self.getParentTag(startTag.parentElement,className);
                } else {
                    return;
                }
            }
        }
    }
</script>
<style scoped>
    .fixed {
        position: absolute
    }
</style>